import Taro, { Component, Config } from '@tarojs/taro'
import { View, Form, Textarea, Input, Button } from '@tarojs/components'
import styles from './complaint.module.scss'
import classNames from 'classnames'
import { CommentImgPicker } from "@/components/index"
import { postComplainAdd } from '@/api/orderApi'
import { toHomePage } from '@/utils/page_router'

export default class ComplaintIndex extends Component {
  state: any
  config: Config = {
    navigationStyle: 'custom',
    backgroundTextStyle: "dark",
    enablePullDownRefresh: true,
  }

  constructor() {
    super(...arguments)
    this.state = {
      tags: [
        {title: '快递问题', type: 'POST', checkbox: false},
        {title: '订单问题', type: 'ORDER', checkbox: false},
        {title: '质量问题', type: 'GOOD', checkbox: false},
        {title: '客服问题', type: 'SERVICE', checkbox: false},
        {title: '平台问题', type: 'SYSTEM', checkbox: false},
        {title: '其他问题', type: 'OTHER', checkbox: false}
      ],
      maxlength: 1000,
      valueLength: 0,
      images: []
    }
  }


  componentDidMount () {
  }

  onSubmit ({ detail: { value } }) {
    const { tags, images } = this.state
    const checkbox = tags.filter(item => item.checkbox === true)
    value.type = checkbox.map(item => item.type).join(',')
    value.images = images.join(',')

    const telephone = /^1(3|4|5|7|8|9)\d{9}$/

    if (!value.type) {
      Taro.showToast({ title: '请选择投诉类型', icon: 'none' })
      return
    }
    if (!value.content) {
      Taro.showToast({ title: '请输入问题描述', icon: 'none' })
      return
    }
    if (!value.name) {
      Taro.showToast({ title: '请输入联系人', icon: 'none' })
      return
    }
    if (!value.telephone) {
      Taro.showToast({ title: '请输入联系电话', icon: 'none' })
      return
    }
    if (value.telephone && !telephone.test(value.telephone)) {
      Taro.showToast({ title: '请输入正确的联系电话', icon: 'none' })
      return
    }
    postComplainAdd(value).then(() => {
      Taro.showToast({ title: '提交成功', icon: 'success' })
      setTimeout(() =>{
        Taro.navigateBack({delta: 1})
      }, 1000)
    })
  }
  onInput (e) {
    this.setState({
      valueLength: e.target.value.length
    })
  }
  onChangeImg (arr) {
    this.setState({
      images: arr
    })
  }
  checkboxTag (index, checkbox) {
    this.state.tags[index]['checkbox'] = !checkbox
    this.setState({
      tags: this.state.tags
    })
  }

  render () {
    const { tags, maxlength, valueLength, images } = this.state
    return (<View className={styles.complaintPage}>
        <View className={styles.head}>
          <View className='f-s-28' onClick={() => Taro.navigateBack({delta: 1})}>返回</View>
          <View className='f-s-32'>投诉</View>
          <View onClick={() => toHomePage()}>主页</View>
        </View>
        <View className={styles.content}>
          <View className={styles.contentItem}>
            <h4 className={styles.contentItemTitle}>投诉类型（必填，可多选）</h4>
            <View className={styles.tags}>
              {tags.map((item, index) => {
                return (<View
                  className={classNames(styles.tagsItem, 'f-g-5', item.checkbox && styles.tagsActive)}
                  onClick={this.checkboxTag.bind(this, index, item.checkbox)}
                >
                  {item.title}
                </View>)
              })}
            </View>
          </View>
          <Form onSubmit={this.onSubmit.bind(this)}>
            <View className={styles.contentItem}>
              <h4 className={styles.contentItemTitle}>问题描述（必填）</h4>
              <View className={styles.describe}>
                <Textarea
                  className={styles.textarea}
                  placeholder="请输入留言"
                  name="content"
                  maxlength={maxlength}
                  onInput={this.onInput.bind(this)}
                />
                <View className={styles.textRight}>{valueLength}/{maxlength}</View>
                <CommentImgPicker list={images}  onChange={this.onChangeImg.bind(this)}/>
              </View>
            </View>
            <View className={styles.contentItem}>
              <View className={styles.other}>
                <View className={classNames(styles.otherItem, styles.border)}>
                  <View className={styles.otherLeft}>联系人</View>
                  <Input name="name" placeholder="请留下您的姓名以便处理问题" />
                </View>
                <View className={classNames(styles.otherItem, styles.border)}>
                  <View className={styles.otherLeft}>联系电话</View>
                  <Input name="telephone" placeholder="请留下您的手机号以便处理问题" />
                </View>
                <View className={styles.otherItem}>
                  <View className={styles.otherLeft}>订单编号</View>
                  <Textarea className={styles.otherText} name="orderId" placeholder="可在我的订单查询复制订单编号,每个订单号以英文逗号隔开" />
                </View>
              </View>
            </View>
            <Button className={styles.submit} formType="submit">提交投诉</Button>
          </Form>
        </View>
      </View>
    )
  }
}
